<template>
  <div class="app-container edit-page">

    <!-- ===== 顶部标题区 ===== -->
    <div class="page-header-box">
      <h2 class="page-title">
        {{ reportTask.titleYear }} {{ reportTask.titleName }}
      </h2>

      <div class="page-subinfo">
        <div class="left-tip">
          表单填写辅助说明：{{ reportTask.helperText }}
        </div>
        <div class="right-tip">
          <span style="color: #5f6165">填报截止时间：</span>{{ reportTask.deadline }}
        </div>
      </div>
    </div>


    <!-- 1. 固定填报表头 -->
    <el-card shadow="never" class="box-card">
      <div slot="header" class="card-header">
        <span class="header-title">填报基本信息</span>

      </div>
      <el-form ref="form" :model="form.header" label-width="120px" :disabled="!isEdit">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="填报人员" prop="reportUser">
              <el-input v-model="form.header.reportUser" placeholder="请输入填报人员" maxlength="50"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="reportUserPhone">
              <el-input v-model="form.header.reportUserPhone" placeholder="请输入联系方式" maxlength="11"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 2. 园区基本信息 -->
    <el-card v-if="visibleBlocks.park" shadow="never" class="box-card">
      <div slot="header" class="card-header">
        <span class="header-title">园区基本信息</span>
      </div>
      <el-form :model="form.park" label-width="120px" :disabled="!isEdit">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="园区名称">
              <el-input v-model="form.park.parkName" maxlength="50"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="园区类型">
              <el-select v-model="form.park.parkType" clearable filterable placeholder="请选择园区类型" style="width:100%">
                <el-option
                  v-for="item in parkTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主要货物">
              <el-select v-model="form.park.mainGoodsType" clearable :multiple="true" filterable placeholder="请选择主要货物" style="width:100%">
                <el-option
                  v-for="item in mainGoodsTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经营方">
              <el-input v-model="form.park.operatorCompany" maxlength="50"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="社会信用代码">
              <el-input v-model="form.park.unifiedSocialCode" maxlength="18"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规模面积">
              <el-input-number :precision="2" :min="0.00" :max="99999.99" controls-position="right"
                               v-model="form.park.area" placeholder="请输入规模面积"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="园区地址">
              <el-input
                v-model="form.park.address"
                placeholder="请选择园区地址"
                readonly
                @click.native="openLocationPicker('park')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属项目">
              <el-select filterable v-model="form.park.belongProject" placeholder="请选择所属项目" clearable
                         style="width: 100%;">
                <el-option v-for="item in belongProjectOptions" :key="item.id" :label="item.projectName+'-'+item.buildStatus" :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓储面积">
              <el-input-number :precision="2" :min="0.00" :max="99999.99" controls-position="right"
                               v-model="form.park.storageArea" placeholder="请输入仓储面积"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="冷库面积">
              <el-input-number :precision="2" :min="0.00" :max="99999.99" controls-position="right"
                               v-model="form.park.coldArea" placeholder="请输入冷库面积"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="铁路专用线数量">
              <el-input-number :min="0" :max="99999" controls-position="right"
                               v-model="form.park.railwayNum" placeholder="请输入铁路专用线数量"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="园区负责人">
              <el-input v-model="form.park.manager" maxlength="50"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人联系方式">
              <el-input v-model="form.park.managerContact" maxlength="11"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 园区附件上传 -->
    <el-card v-if="visibleBlocks.park" shadow="never" class="box-card upload-card">
      <div slot="header" class="card-header">
        <span class="header-title">园区资料</span>
      </div>

      <el-form :model="form.park" label-width="120px" :disabled="!isEdit">
        <el-row :gutter="30">
          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="规划附件">
              <FileUpload v-model="form.park.fileList1" :limit="1" :fileType="['pdf']" :fileSize="25"
                          :show-delete-button="form.dataStatus === 0 || form.dataStatus === 2"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="可研附件">
              <FileUpload v-model="form.park.fileList2" :limit="1" :fileType="['pdf']" :fileSize="25"
                          :show-delete-button="form.dataStatus === 0 || form.dataStatus === 2"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="初步设计附件">
              <FileUpload v-model="form.park.fileList3" :limit="1" :fileType="['pdf']" :fileSize="25"
                          :show-delete-button="form.dataStatus === 0 || form.dataStatus === 2"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="施工图设计附件">
              <FileUpload v-model="form.park.fileList4" :limit="1" :fileType="['pdf']" :fileSize="25"
                          :show-delete-button="form.dataStatus === 0 || form.dataStatus === 2"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="其他附件">
              <FileUpload v-model="form.park.fileList5" :limit="3" :fileType="['pdf','doc','docx','jpg','png']"
                          :fileSize="25"
                          :show-delete-button="form.dataStatus === 0 || form.dataStatus === 2"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 3. 场站基本信息 -->
    <el-card v-if="visibleBlocks.station" shadow="never" class="box-card">
      <div slot="header" class="card-header">
        <span class="header-title">场站基本信息</span>
      </div>
      <el-form :model="form.station" label-width="120px" :disabled="!isEdit">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="场站名称">
              <el-input v-model="form.station.stationName" maxlength="50"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="场站类型">
              <el-select v-model="form.station.stationType" clearable filterable placeholder="请选择场站类型" style="width:100%">
                <el-option
                  v-for="item in stationTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主要货物类型">
              <el-select v-model="form.station.mainGoodsType" clearable :multiple="true" filterable placeholder="请选择主要货物" style="width:100%">
                <el-option
                  v-for="item in mainGoodsTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经营方">
              <el-input v-model="form.station.operatorCompany" maxlength="50"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="社会信用代码">
              <el-input v-model="form.station.unifiedSocialCode" maxlength="18"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规模面积">
              <el-input-number :precision="2" :min="0.00" :max="99999.99" controls-position="right"
                               v-model="form.station.area" placeholder="请输入规模面积"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="场站地址">
              <el-input
                v-model="form.station.address"
                placeholder="请选择场站地址"
                readonly
                @click.native="openLocationPicker('station')"
                maxlength="50"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="场站所属园区(待完善)">
              <el-input v-model="form.station.belongParkId"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="场站负责人">
              <el-input v-model="form.station.manager" maxlength="50"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人联系方式">
              <el-input v-model="form.station.managerContact" maxlength="11"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 场站附件上传 -->
    <el-card shadow="never" class="box-card upload-card" v-if="visibleBlocks.station">
      <div slot="header" class="card-header">
        <span class="header-title">场站资料</span>
      </div>

      <el-form :model="form.station" label-width="120px" :disabled="!isEdit">
        <el-row :gutter="30">
          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="规划附件">
              <FileUpload v-model="form.station.fileList1" :limit="1" :fileType="['pdf']" :fileSize="25"
                          :show-delete-button="form.dataStatus === 0 || form.dataStatus === 2"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="可研附件">
              <FileUpload v-model="form.station.fileList2" :limit="1" :fileType="['pdf']" :fileSize="25"
                          :show-delete-button="form.dataStatus === 0 || form.dataStatus === 2"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="初步设计附件">
              <FileUpload v-model="form.station.fileList3" :limit="1" :fileType="['pdf']" :fileSize="25"
                          :show-delete-button="form.dataStatus === 0 || form.dataStatus === 2"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="施工图设计附件">
              <FileUpload v-model="form.station.fileList4" :limit="1" :fileType="['pdf']" :fileSize="25"
                          :show-delete-button="form.dataStatus === 0 || form.dataStatus === 2"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="其他附件">
              <FileUpload v-model="form.station.fileList5" :limit="3" :fileType="['pdf','doc','docx','jpg','png']"
                          :fileSize="25"
                          :show-delete-button="form.dataStatus === 0 || form.dataStatus === 2"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>


    <!-- 4. 场站物流运营基本信息 -->
    <el-card v-if="visibleBlocks.stationOp" shadow="never" class="box-card">
      <div slot="header" class="card-header">
        <span class="header-title">场站物流运营基本信息 + {填报周期}</span>
      </div>
      <el-form :model="form.stationOp" label-width="120px" :disabled="!isEdit">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="货运量吨">
              <el-input-number :precision="2" :min="0.00" :max="99999.99" controls-position="right"
                               v-model="form.stationOp.freightVolume" placeholder="请输入货运量吨"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车次数">
              <el-input-number :min="0" :max="99999" controls-position="right"
                               v-model="form.stationOp.carNum" placeholder="请输入铁路专用线数量"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 5. 物流企业基本信息 -->
    <el-card v-if="visibleBlocks.company" shadow="never" class="box-card">
      <div slot="header" class="card-header">
        <span class="header-title">物流企业基本信息</span>
      </div>
      <el-form :model="form.company" label-width="120px" :disabled="!isEdit">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="企业名称">
              <el-input v-model="form.company.companyName" maxlength="50"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="社会信用代码">
              <el-input v-model="form.company.unifiedSocialCode" maxlength="18"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司法人">
              <el-input v-model="form.company.legalPerson" maxlength="50"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业类型">
              <el-select v-model="form.company.companyType" clearable filterable placeholder="请选择企业类型" style="width:100%">
                <el-option
                  v-for="item in companyTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主营业务" v-show="form.company.companyType ==='1'">
              <el-select v-model="form.company.mainBusiness" clearable :multiple="true" filterable placeholder="请选择主营业务" style="width:100%">
                <el-option
                  v-for="item in mainBusinessOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册日期">
              <el-date-picker v-model="form.company.registerDate" type="date" value-format="yyyy-MM-dd"
                              style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册地址">
              <el-input v-model="form.company.registerAddress" maxlength="50"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="办公地址">
              <el-input
                v-model="form.company.officeAddress"
                placeholder="请选择办公地址"
                readonly
                @click.native="openLocationPicker('companyOffice')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属园区(待完善)">
              <el-input v-model="form.company.belongParkId"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业人数">
              <el-input-number :min="0" :max="99999" controls-position="right"
                               v-model="form.company.employeeCount" placeholder="请输入企业人数"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业联系人">
              <el-input v-model="form.company.manager" maxlength="50"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式">
              <el-input v-model="form.company.managerContact" maxlength="50"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 企业附件上传 -->
    <el-card shadow="never" class="box-card upload-card" v-if="visibleBlocks.company">
      <div slot="header" class="card-header">
        <span class="header-title">企业资料</span>
      </div>

      <el-form :model="form.company" label-width="160px" :disabled="!isEdit">
        <el-row :gutter="30">
          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="营业执照附件">
              <FileUpload v-model="form.company.fileList1" :limit="1" :fileType="['pdf']" :fileSize="25"
                          :show-delete-button="form.dataStatus === 0 || form.dataStatus === 2"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="企业荣誉信息">
              <FileUpload v-model="form.company.fileList2" :limit="1" :fileType="['pdf']" :fileSize="25"
                          :show-delete-button="form.dataStatus === 0 || form.dataStatus === 2"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="企业综合能力评估等级">
              <el-select v-model="form.company.companyLevel" clearable filterable placeholder="请选择主营业务" style="width:100%">
                <el-option
                  v-for="item in companyLevelOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 6. 企业车辆信息 -->
    <el-card v-if="visibleBlocks.companyVehicles" shadow="never" class="box-card">
      <div slot="header" class="card-header">
        <span class="header-title">物流企业车辆信息</span>
      </div>
      <el-form :model="form.companyVehicles" label-width="140px" :disabled="!isEdit">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="普货车辆数量(辆)">
              <el-input-number :min="0" :max="99999" controls-position="right"
                               v-model="form.companyVehicles.normalCarCount" placeholder="请输入普货车辆数量"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="冷藏车辆数量(辆)">
              <el-input-number :min="0" :max="99999" controls-position="right"
                               v-model="form.companyVehicles.freezeCarCount" placeholder="请输入冷藏车辆数量"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="危货车辆数量(辆)">
              <el-input-number :min="0" :max="99999" controls-position="right"
                               v-model="form.companyVehicles.dangerousCarCount" placeholder="请输入危货车辆数量"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="普货车辆总载重(吨)">
              <el-input-number :precision="2" :min="0.00" :max="99999.99" controls-position="right"
                               v-model="form.companyVehicles.normalCarWeight" placeholder="请输入普货车辆总载重"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="冷藏车辆总载重(吨)">
              <el-input-number :precision="2" :min="0.00" :max="99999.99" controls-position="right"
                               v-model="form.companyVehicles.freezeCarWeight" placeholder="请输入冷藏车辆总载重"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="危货车辆总载重(吨)">
              <el-input-number :precision="2" :min="0.00" :max="99999.99" controls-position="right"
                               v-model="form.companyVehicles.dangerousCarWeight" placeholder="请输入危货车辆总载重"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 7. 企业仓储信息 -->
    <el-card v-if="visibleBlocks.companyStorage" shadow="never" class="box-card">
      <div slot="header" class="card-header">
        <span class="header-title">物流企业仓储信息</span>
      </div>

      <el-form :model="form.companyStorage" label-width="120px" :disabled="!isEdit">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="仓库个数(个)">
              <el-input v-model="form.companyStorage.count" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库总面积(㎡)">
              <el-input v-model="form.companyStorage.totalArea" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库总容量(m³)">
              <el-input v-model="form.companyStorage.totalCapacity" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 动态仓库列表（卡片式） -->
        <div v-for="(item,index) in form.companyStorage.list" :key="index" class="storage-card"
             style="margin-bottom:15px;"
        >
          <el-card shadow="always" style="padding:10px;">
            <!-- header 插槽 -->
            <template #header>
              <div style="display:flex; justify-content:space-between; align-items:center;">
                <span>仓库 {{ index + 1 }}</span>
                <el-button type="danger" size="mini" @click="removeStorage(index)" v-if="isEdit">删除</el-button>
              </div>
            </template>
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item :label="'仓库名称'">
                  <el-input v-model="item.storeName" :disabled="!isEdit" maxlength="50"/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="仓库类型">
                  <el-select v-model="item.storeType" clearable filterable placeholder="请选择仓库类型" style="width:100%" :disabled="!isEdit">
                    <el-option
                      v-for="item in storeTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="货物类型">
                  <el-select v-model="item.goodsType" clearable :multiple="true" filterable placeholder="请选择货物类型" style="width:100%">
                    <el-option
                      v-for="item in mainGoodsTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="仓库位置">
                  <el-input v-model="item.location" placeholder="请选择地址" readonly :disabled="!isEdit"
                            @focus="openLocationPicker('warehouse', index)"
                            @click.native="openLocationPicker('warehouse', index)"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="面积(㎡)">
                  <el-input-number :precision="2" :min="0.00" :max="99999.99" controls-position="right"
                                   v-model="item.area" placeholder="请输入面积(㎡)"  :disabled="!isEdit"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="容量(m³)">
                  <el-input-number :precision="2" :min="0.00" :max="99999.99" controls-position="right"
                                   v-model="item.capacity" placeholder="请输入容量(m³)"  :disabled="!isEdit"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </div>

        <el-button type="primary" @click="addStorage" style="margin-bottom:20px;">新增仓库</el-button>
      </el-form>
    </el-card>


    <!-- 8. 企业专线信息 -->
    <el-card v-if="visibleBlocks.companyLine" shadow="never" class="box-card">
      <div slot="header" class="card-header">
        <span class="header-title">物流企业专线信息</span>
      </div>

      <el-form :model="form.companyLine" label-width="120px" :disabled="!isEdit">
        <div v-for="(item,index) in form.companyLine.list" :key="index" class="line-card" style="margin-bottom:15px;">
          <el-card shadow="always" style="padding:10px;">
            <template #header>
              <div style="display:flex; justify-content:space-between; align-items:center;">
                <span>专线 {{ index + 1 }}</span>
                <el-button type="danger" size="mini" @click="removeLine(index)" v-if="isEdit">删除</el-button>
              </div>
            </template>
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :md="12">
                <el-form-item label="专线起点">
                  <el-cascader
                    :options="regionOptions"
                    v-model="item.startPoint"
                    placeholder="请选择起点"
                    :props="{ checkStrictly: true }"
                    :disabled="!isEdit"
                    :filterable="true"
                    @change="onLineChange(item)"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12">
                <el-form-item label="专线终点">
                  <el-cascader
                    :options="regionOptions"
                    v-model="item.endPoint"
                    placeholder="请选择终点"
                    :filterable="true"
                    :disabled="!isEdit"
                    :props="{ checkStrictly: true }"
                    @change="onLineChange(item)"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12">
                <el-form-item label="专线类型">
                  <el-select v-model="item.lineType" clearable filterable placeholder="请选择专线类型" style="width:100%" :disabled="!isEdit">
                    <el-option
                      v-for="item in lineTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12">
                <el-form-item label="车辆数量">
                  <el-input-number :min="0" :max="99999" controls-position="right"
                                   v-model="item.carCount" placeholder="请输入车辆数量"  :disabled="!isEdit"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12">
                <el-form-item label="是否省内">
                  <el-tooltip :content="'请选择专线起点和终点'" placement="top">
                    <el-switch
                      v-model="item.provinceType"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      :active-value="true"
                      :inactive-value="false" disabled>
                    </el-switch>
                  </el-tooltip>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </div>

        <el-button type="primary" @click="addLine" v-if="isEdit" style="margin-bottom:20px;">新增专线</el-button>
      </el-form>
    </el-card>


    <!-- 9. 企业运营信息 -->
    <el-card v-if="visibleBlocks.companyOp" shadow="never" class="box-card">
      <div slot="header" class="card-header">
        <span class="header-title">物流企业运营信息</span>
      </div>

      <el-form :model="form.companyOp" label-width="120px" :disabled="!isEdit">

        <!-- 原有字段，可以继续保留 -->
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="总货运量(吨)">
              <el-input-number :precision="2" :min="0.00" :max="99999.99" controls-position="right"
                               v-model="form.companyOp.totalTonnage" placeholder="请输入总货运量"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总车次数">
              <el-input-number :min="0" :max="99999" controls-position="right"
                               v-model="form.companyOp.totalVehicleCount" placeholder="请输入总车次数"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- ======================= 新增：json ======================= -->
        <div style="margin-top: 20px;">
          <h3 style="font-size: 14px; margin-bottom: 10px;">专线货运量填写</h3>

          <!-- 如果没有专线信息，则不显示表格 -->
          <div v-if="form.companyLine.list && form.companyLine.list.length > 0">
            <el-table :data="form.companyOp.lineOp" border style="width: 100%;">
              <el-table-column label="物流专线">
                <template #default="scope">
                  {{ scope.row.startPoint }} - {{ scope.row.endPoint }}
                </template>
              </el-table-column>

              <el-table-column label="专线货运量(吨)">
                <template #default="scope">
                  <el-input-number
                    :precision="2" :min="0.00" :max="99999.99" controls-position="right"
                                   v-model="scope.row.tonnage" placeholder="请输入货运量" :disabled="!isEdit"
                  />
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div v-else style="color: #888; margin-top: 10px;">
            当前无专线信息，无需填写专线货运量。
          </div>
        </div>

      </el-form>
    </el-card>

    <!-- ====== 下面是按钮区 ====== -->
    <div class="footer-actions" >
      <el-button @click="submitBack">返回</el-button>
      <el-button type="primary" :loading="buttonLoading" @click="submitForm" v-if="isEdit">提交</el-button>
    </div>


    <location-picker
      :visible.sync="locationDialogVisible"
      :value="pickedLocation"
      @input="onLocationPicked"
    />
  </div>
</template>

<script>
import FileUpload from '@/components/FileUpload'
import { getReportTask } from '@/api/reportTask/reportTask'
import LocationPicker from '@/components/Map/MapSelector.vue'
// 需要修改
import { listTransportProject} from '@/api/dataBase/transportProject'

export default {
  name: 'DynamicTransportForm',
  components: { LocationPicker, FileUpload },
  computed: {
    isEdit() {
      if (this.isPreview) {
        return false
      }
      return this.form.dataStatus === 0 || this.form.dataStatus === 2
    }
  },
  data() {
    return {
      regionOptions: [],
      isPreview: false,
      locationDialogVisible: false,
      // 选择框
      parkTypeOptions: [{
        value: '1',
        label: '公路园区'
      }, {
        value: '2',
        label: '铁路园区'
      }, {
        value: '3',
        label: '水运园区'
      }, {
        value: '4',
        label: '航空园区'
      }],
      mainGoodsTypeOptions: [{
        value: '1',
        label: '普货'
      }, {
        value: '2',
        label: '生鲜'
      }, {
        value: '3',
        label: '建材'
      }, {
        value: '4',
        label: '机械制造'
      },{
        value: '5',
        label: '医药化工'
      },{
        value: '6',
        label: '大宗'
      },{
        value: '7',
        label: '快递'
      },],
      belongProjectOptions:[],
      stationTypeOptions: [{
        value: '1',
        label: '客运场站'
      }, {
        value: '2',
        label: '快递场站'
      }, {
        value: '3',
        label: '铁路场站'
      }, {
        value: '4',
        label: '水运场站'
      }, {
        value: '5',
        label: '多式联运场站'
      },{
        value: '6',
        label: '危化品和特货场站'
      },],
      companyTypeOptions: [{
        value: '1',
        label: '运输'
      }, {
        value: '2',
        label: '仓储'
      }, {
        value: '3',
        label: '快递'
      }],
      mainBusinessOptions: [{
        value: '1',
        label: '公路物流'
      }, {
        value: '2',
        label: '铁路物流'
      }, {
        value: '3',
        label: '航运物流'
      }, {
        value: '4',
        label: '多式联运物流'
      },],
      companyLevelOptions: [{
        value: '1',
        label: 'A级'
      }, {
        value: '2',
        label: '2A级'
      }, {
        value: '3',
        label: '3A级'
      }, {
        value: '4',
        label: '4A级'
      },{
        value: '5',
        label: '5A级'
      },{
        value: '6',
        label: '非A级'
      },],
      storeTypeOptions: [{
        value: '1',
        label: '普货'
      }, {
        value: '2',
        label: '冷链'
      }, {
        value: '3',
        label: '散货堆场'
      }, {
        value: '4',
        label: '快递分拨'
      }],
      lineTypeOptions: [{
        value: '1',
        label: '公路'
      }, {
        value: '2',
        label: '铁路'
      }, {
        value: '3',
        label: '水路'
      }, {
        value: '4',
        label: '多式联运'
      }],
      pickedLocation: {
        lng: null,
        lat: null,
        address: ''
      },
      buttonLoading: false,
      visibleBlocks: {},
      reportTask: {
        titleYear: '',
        titleName: '',
        helperText: '',
        deadline: '',
        reportTemplate: 'header,park,station,stationOp,company,companyVehicles,companyStorage,companyLine,companyOp' // 默认模板
      },
      form: {
        // ======= 顶部标题区数据（接口返回） =======
        titleYear: '',
        titleName: '',
        helperText:
          '',
        deadline: '',
        dataStatus: 0,
        header: {
          taskId: '',
          taskName: '',
          reportTime: '',
          deadline: '',
          companyName: '',
          creditCode: '',
          reportUser: '',
          reportUserPhone: ''
        },
        park: {
          parkName: '',
          parkType: '',
          mainGoodsType: '',
          operatorCompany: '',
          unifiedSocialCode: '',
          area: '',
          address: '',
          longitude: '',
          latitude: '',
          belongProject: '',
          storageArea: '',
          coldArea: '',
          railwayNum: '',
          manager: '',
          managerContact: '',
          fileList1: '',
          fileList2: '',
          fileList3: '',
          fileList4: '',
          fileList5: ''
        },
        station: {
          stationName: '',
          stationType: '',
          mainGoodsType: '',
          operatorCompany: '',
          unifiedSocialCode: '',
          area: '',
          address: '',
          longitude: '',
          latitude: '',
          belongParkId: '',
          belongParkName: '',
          manager: '',
          managerContact: '',
          fileList1: '',
          fileList2: '',
          fileList3: '',
          fileList4: '',
          fileList5: ''
        },
        stationOp: { freightVolume: '', carNum: '' },
        company: {
          companyName: '',
          unifiedSocialCode: '',
          legalPerson: '',
          companyType: '',
          mainBusiness: '',
          registerDate: '',
          registerAddress: '',
          officeAddress: '',
          longitude: '',
          latitude: '',
          belongParkId: '',
          belongParkName: '',
          employeeCount: '',
          manager: '',
          managerContact: '',
          companyLevel: '',
          fileList1: '',
          fileList2: '',
          fileList3: ''
        },
        companyVehicles: {
          normalCarCount: '',
          freezeCarCount: '',
          dangerousCarCount: '',
          normalCarWeight: '',
          freezeCarWeight: '',
          dangerousCarWeight: ''
        },
        companyStorage: { storeCount: 0, storeArea: 0, storeCapacity: 0, list: [] },
        companyLine: { list: [] },
        companyOp: { totalTonnage: '', totalVehicleCount: '', lineOp: [] }
      }
    }
  },
  mounted() {
    fetch('/china-region.json')
      .then(res => res.json())
      .then(data => {
        this.regionOptions = data
      })
      .catch(err => {
        console.error('读取地区 JSON 出错:', err)
      })
    const query = this.$route.query
    console.log('query', query)
    // 查询选择框
    this.getProjectList()
    //预览
    if (query.reportTemplate) {
      this.reportTask = {
        titleYear: query.titleYear || '',
        titleName: query.titleName || '',
        helperText: query.helperText || '',
        deadline: query.deadline || '',
        reportTemplate: query.reportTemplate || ''
      }
      this.isPreview = query.isPreview
      this.updateVisibleBlocks(this.reportTask.reportTemplate)
      return
    }

    //填报
    if (query.id) {
      this.getFromById(query.id)
      return
    }
    this.updateVisibleBlocks(this.reportTask.reportTemplate)
  },
  watch: {
    // 'form.companyLine.list': {
    //   handler(newList) {
    //     // 遍历同步 lineOp
    //     newList.forEach((line, index) => {
    //       if (!this.form.companyOp.lineOp[index]) {
    //         this.form.companyOp.lineOp[index] = { startPoint: '', endPoint: '', tonnage: '' }
    //       }
    //       this.form.companyOp.lineOp[index].startPoint = line.startPoint
    //       this.form.companyOp.lineOp[index].endPoint = line.endPoint
    //     })
    //     // 如果 lineOp 比 lineList 长，删除多余的
    //     this.form.companyOp.lineOp = this.form.companyOp.lineOp.slice(0, newList.length)
    //   },
    //   deep: true
    // }
  },
  methods: {
    getFromById(id) {
      this.loading = true
      getReportTask(id).then(response => {
        this.loading = false
        this.reportTask = {
          titleName: response.taskName || '',
          helperText: response.remark || '',
          deadline: response.deadline || '',
          reportTemplate: response.reportTemplate || ''
        }
        this.isPreview = false
        this.updateVisibleBlocks(this.reportTask.reportTemplate)
      })
    },
    updateVisibleBlocks(template) {
      const blocks = ['header', 'park', 'station', 'stationOp', 'company', 'companyVehicles', 'companyStorage', 'companyLine', 'companyOp']
      this.visibleBlocks = {}
      blocks.forEach(b => {
        this.visibleBlocks[b] = template.includes(b)
      })
    },
    submitBack() {
      this.$router.back()
    },
    submitForm() {
      // 这里提交逻辑，调用接口
      console.log('提交数据:', this.form)
    },
    addStorage() {
      this.form.companyStorage.list.push({
        storeName: '',
        storeType: '',
        goodsType: '',
        area: '',
        capacity: '',
        location: '',
        longitude: '',
        latitude: ''
      })
    },
    removeStorage(index) {
      this.form.companyStorage.list.splice(index, 1)
    },
    addLine() {
      const newLine = { startPoint: '', endPoint: '', lineType: '', carCount: '', provinceType: true }
      this.form.companyLine.list.push(newLine)
      this.addLineOp() // 同步 lineOp
    },
    removeLine(index) {
      this.form.companyLine.list.splice(index, 1)
      this.removeLineOp(index)
    },
    addLineOp() {
      this.form.companyOp.lineOp.push({
        startPoint: '',
        endPoint: '',
        tonnage: ''
      })
    },
    removeLineOp(index) {
      this.form.companyOp.lineOp.splice(index, 1)
    },
    /** 打开地图选点 */
    openLocationPicker(key, index = null) {
      this.currentKey = key
      this.currentIndex = index

      // 预填地图位置
      if (key === 'park') {
        this.pickedLocation = {
          lng: this.form.park.longitude,
          lat: this.form.park.latitude,
          address: this.form.park.address
        }
      } else if (key === 'station') {
        this.pickedLocation = {
          lng: this.form.station.longitude,
          lat: this.form.station.latitude,
          address: this.form.station.address
        }
      } else if (key === 'companyOffice') {
        this.pickedLocation = {
          lng: this.form.company.officeLongitude,
          lat: this.form.company.officeLatitude,
          address: this.form.company.officeAddress
        }
      } else if (key === 'warehouse') {
        const w = this.form.companyStorage.list[index]
        this.pickedLocation = {
          lng: w.longitude,
          lat: w.latitude,
          address: w.location
        }
      }

      this.locationDialogVisible = true
    },

    /** 地图选点 → 回填 */
    onLocationPicked(location) {
      const { lng, lat, address } = location

      switch (this.currentKey) {

        case 'park':
          this.form.park.address = address
          this.form.park.longitude = lng
          this.form.park.latitude = lat
          break

        case 'station':
          this.form.station.address = address
          this.form.station.longitude = lng
          this.form.station.latitude = lat
          break

        case 'companyOffice':
          this.form.company.officeAddress = address
          this.form.company.officeLongitude = lng
          this.form.company.officeLatitude = lat
          break

        case 'warehouse':
          const w = this.form.companyStorage.list[this.currentIndex]
          w.location = address
          w.longitude = lng
          w.latitude = lat
          break
      }

      this.locationDialogVisible = false

      console.log(this.form)
    },
    onLineChange(line) {
      // 判断是否是湖北省内专线
      const startProvince = line.startPoint[0] || ''
      const endProvince = line.endPoint[0] || ''
      line.provinceType = startProvince === '湖北省' && endProvince === '湖北省'
      console.log("1111",line)
      // 同步到 companyOp.lineOp
      this.updateLineOp()
    },
    updateLineOp() {
      console.log('更新')
      this.form.companyOp.lineOp = this.form.companyLine.list.map(item => ({
        startPoint: Array.isArray(item.startPoint) && item.startPoint.length > 0
          ? item.startPoint[item.startPoint.length - 1]
          : item.startPoint || '',
        endPoint: Array.isArray(item.endPoint) && item.endPoint.length > 0
          ? item.endPoint[item.endPoint.length - 1]
          : item.endPoint || '',
        provinceType: item.provinceType,
        lineType: item.lineType,
        carCount: item.carCount
      }))
    },

  //   选择框
    getProjectList() {
      listTransportProject().then(response => this.belongProjectOptions = response.rows)
    },
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.footer-actions {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  padding-bottom: 60px; /* 预留底部空间，避免贴底 */
}

.box-card {
  border-radius: 8px;
  border: 1px solid #e6e8eb;
  margin-bottom: 20px;
}

.my-el-col {
  height: 180px;
}

/* ===== 顶部标题区样式 ===== */
.page-header-box {
  text-align: center;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 2px solid #22b9ff;
  margin-bottom: 20px;
  display: inline-block;
}

.page-subinfo {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 14px;
  color: #606266;
  margin-top: 10px;
  padding: 0 5px;
}

.page-subinfo .left-tip {
  text-align: left;
  color: #bec2ca;
  width: 50%;
}

.page-subinfo .right-tip {
  text-align: right;
  color: red;
  width: 50%;
}

</style>
